<template>
    <span class="xkl-text xkl-text-select">{{ label }}</span>
</template>
<script setup lang="ts">
import { Ref, computed, ref } from 'vue';
defineOptions({ name: 'XklTextSelect' })
const props = defineProps(['form', 'option'])
const emit = defineEmits(['loaded'])
const { form, option } = props

const list: Ref<any[]> = ref([])

list.value = option.config.list

emit('loaded', list.value, (vals) => {
    list.value = vals
})


const label = computed(() => {
    if (Array.isArray(form[option.prop])) {
        const items = list.value.filter(item => form[option.prop].includes(item.value))
        const label = items.map(inner => inner.label).join('，')
        return label;
    } else {
        const item = list.value.find(item => item.value == form[option.prop]) || { label: '' }
        return item.label;
    }
})

if (form._label) {
    form._label[option.prop] = label
} else {
    form._label = {
        [option.prop]: label
    }
}


</script>